<template>
	<view>
		<view class="top">
			<image :src="'https://mp-7624d465-b74c-48e8-8df4-f826a97b580c.cdn.bspapp.com/image/youhuiquans.png'" mode=""></image>
			<view class="wenzi">
				<view class="">
					打针皮下注册注射
				</view>
				<view class="">
					价格
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="middleList">
				<view class="text">
					服务地址
				</view>
				<view class="text2">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	请选择服务地址>
				</view>
			</view>
			<view class="middleList">
				<view class="text">
					被护理人信息
				</view>
				<view class="text2">
					&nbsp;&nbsp;&nbsp;请选择被护理人信息>
				</view>
			</view>
			<view class="middleList">
				<view class="text">
					情况描述
				</view>
				<view class="text2">
					必填可以告诉我们您的>
				</view>
			</view>	
		</view>
		<view style="height: 100rpx;" class="middle">
			<view class="middleList">
				<view class="text">
					预约服务时间
				</view>
				<view style="width: 350rpx;" class="text2">
					请选择服务时间>
				</view>
			</view>
		</view>
		<!-- <view class="middle">
			<view class="middleList">
				<view class="text">
					选择服务人员
				</view>
				
			</view>
			<view class="middleList">
				<view class="text">
					护士
				</view>
				<view style="width: 200rpx;color: black;" class="text2">
					预估288/次
				</view>
			</view>	
		</view> -->
		<view style="height: 100rpx;" class="middle">
			<view class="middleList">
				<view class="text">
					购买次数
				</view>
				<view @click="decrease" class="increase">
					- 
				</view>
				<span>&nbsp;&nbsp;</span>
				
				    <span>{{ count }}</span>
					<span>&nbsp;&nbsp;</span>
				    
					<view @click="increase" class="increase">
						+
					</view>
					<span>&nbsp;&nbsp;</span>
					次	
			</view>
		</view>
		<view style="height: 120rpx;" class="middle">
			<view style="padding: 10rpx 0rpx 0rpx 0rpx;" class="middleList">
				<view class="text">
					打针消耗包
				</view>
				 <view >
				    <radio-group style="display: flex;width: 480rpx;margin-top: 20rpx;" @change="payPersonRadioChange">
				      <label v-for="(item, index) in payPerson" :key="index" class="radio-label">
				        <view class="radio-item">
				          <radio :value="index + ''" color="#FF6000" :checked="index === payPersonIndex" />
				        </view>
						
				        <view class="text-container">
							
				          <text :class="[index == payPersonIndex ? 'fontcolour' : '']">{{ item.value }}</text>
						  &nbsp;&nbsp;&nbsp;&nbsp;
				        </view>
				      </label>
				    </radio-group>
				  </view>
			</view>
		</view>
		<view style="height: 100rpx;" class="middle">
			<view class="middleList">
				<view class="text">
					选择优惠券
				</view>
				<view style="width: 200rpx;color: black;" class="text2">
					-￥0.00>
				</view>
				
			</view>
		</view>
		
		<view style="margin-top: 20rpx;padding: 20rpx 0rpx 0rpx 20rpx;" class="middle">
			<text class="text">选择上传就医记录</text>
			
			<view style="display: flex;flex-direction: column;margin-top: 20rpx;padding: 20rpx 0rpx 0rpx 0rpx;width: 500rpx;" class="">
						<uni-section style=""  type="">
								<view class="example-body custom-image-box">
									
									<uni-file-picker style=""  limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
										file-mediatype="image">+</uni-file-picker>
								</view>
							</uni-section>
				
			</view>
		</view>
		<view style="height: 120rpx;" class="middle">
			<view class="middleList">
				<view class="text">
					备注
				</view>
				 <view style="width: 100rpx;" class="text2" >
				    选填>
				  </view>
			</view>
		</view>
		
		<view class="">
			<view style="height: 300rpx;position: fixed;bottom: 0;;" class="middle">
				<view  class="middleList">
					<!-- <view class="text">
						打针消耗包
					</view> -->
					 <view  class="text" >
					    <radio-group style="display: flex;width: 450rpx;margin-top: 20rpx;" @change="payPersonRadioChange">
					      <label v-for="(item, index) in payPerson1" :key="index" class="radio-label">
					        <view  class="radio-item">
					          <radio :value="index + ''" color="#FF6000" :checked="index === payPersonIndex" />
					        </view>
							
					        <view style="width: 500rpx;" class="text-container">
								
					          <text :class="[index == payPersonIndex ? 'fontcolour' : '']">{{ item.value }}</text>
							  &nbsp;&nbsp;&nbsp;&nbsp;
					        </view>
					      </label>
					    </radio-group>
					  </view>
					  
				</view>
				
				<view class="fixed-bottom">
					<view   class="middleList">
						<view class="text">
							合计 <span style="color: #ED783D;">￥{{originPrice}}</span>
							
						</view>
						<view style="color: black;width: 300rpx;height: 100rpx;background-color: #5EC7AA;display: flex;justify-content: center;align-items: center;border-radius: 50rpx;color: white;" class="text2">
							去支付
						</view>
					</view>
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count:0,
				originPrice:uni.getStorageSync('salesPrice'),
				payPerson: [{
								value: '不需要',
								key: "1"
							}, {
								value: '需要￥30',
								key: "0"
							}],
				payPerson1: [{
								value: '已阅读并同意《平台服务协议》',
								key: "0"
							}],
				
				
				
				
			}
		},
		
		 methods: {
		    decrease() {
		      if (this.count > 0) {
		        this.count--;
		      }
		    },
		    increase() {
		      this.count++;
		    }
		  },
		  payPersonRadioChange(e) {
		  			this.payPersonIndex = e.detail.value
		  		},

		
	}
</script>


<style lang="scss">
	
	.fixed-bottom {
		// flex: 0 0 100rpx;
	  // position: fixed;
	  // position: absolute;
	  bottom: 0;
	 
	}
	.radio-label {
  display: flex;
  align-items: center;
}

.radio-item {
	
  margin-right: 10px;
}

.text-container {
  display: flex;
  align-items: center;
}

.fontcolour {
  color: red;
}
	.increase{
		width: 50rpx;
		height: 50rpx;
		border: 1px solid green;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.middle{
		width: 95%;
		height: 300rpx;
		background-color: #FFFFFF;
		margin: auto;
		border-radius: 20rpx;
	}
	.middleList{
		display: flex;
		align-items: center;
		margin: 10px 0px;
		border-radius: 20rpx;
		line-height: 60rpx;
		
		// width: 80%;
		.text{
			width: 90%;
			// margin-top: 20rpx;
			padding: 20rpx 0rpx 0rpx 30rpx;
			
			
		}
		.text2{
			color: #999999;
			width: 580rpx;
			margin-top: 20rpx;
			font-size: 30rpx;
		}
	}
	
	page{
		height:150vh;
		background-color: #F6F7FA;
	}
	image{
		width: 180rpx;
		height: 180rpx;
	}
	.top{
		display: flex;
		padding: 20rpx;
		/* border:1px solid red; */
		width: 90%;
		margin: auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.wenzi{
		margin-top: 10rpx;
		line-height: 80rpx;
		margin-left: 40rpx;
	}

</style>
